<template>
  <div id="pressAnalys" style="width:100%;height:275px"></div>
</template>
<script>
export default {
  name: "pressAnalys",
  data () {
    return {

    };
  },
  props: [
    'barData'
  ],
  created () {
  },
  mounted () {
  },
  watch: {
    barData: {
      deep: true,
      handler (value) {
        console.log(value)
        this.initCharts(value)
      },
    }
  },
  methods: {
    initCharts (value) {
      let myCharts = this.$echarts.init(document.getElementById('pressAnalys'));
      let option = {
        xAxis: {
          type: 'category',
          boundaryGap: [],
          data: value.xData
          // data: ['Mon', '']
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false,  //刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          axisLabel: {
            show: false, //隐藏刻度值
          }
        },
        series: [
          {
            name: "当前值",
            data: [1, 1, 1],
            type: 'line',
            areaStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#F0F9FC'    // 0% 处的颜色
                }, {
                  offset: 1, color: '#F0F9FC' //   100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            lineStyle: { // 设置线条的style等
              normal: {
                color: '#0B9AC3', // 折线线条颜色:红色
              },
            },
            itemStyle: {
              // 设置线条上点的颜色（和图例的颜色）
              normal: {
                color: '#0B9AC3',
              },
            },
          }
        ],
        // grid: {
        //   left: 10,
        //   // containLabel: true,
        // }
      };
      // 使用刚指定的配置项和数据显示图表。
      myCharts.setOption(option, true);
      window.addEventListener("resize", () => {
        myCharts.resize();
      });
    }
  }
}
</script>
<style>
#pressAnalys {
  z-index: 999;
}
</style>